
<div class="w-72 space-y-4">
  <div class="relative w-full">
    <input placeholder="Input Primary" type="text" class="w-full aria-disabled:cursor-not-allowed outline-none focus:outline-none text-stone-800 dark:text-white placeholder:text-stone-600/60 ring-transparent border border-stone-200 transition-all ease-in disabled:opacity-50 disabled:pointer-events-none select-none text-sm py-2 px-2.5 ring shadow-sm bg-white rounded-lg duration-100 hover:border-stone-300 hover:ring-none focus:border-stone-400 focus:ring-none peer" />
  </div>
  <div class="relative w-full">
    <input placeholder="Input Secondary" type="text" class="w-full aria-disabled:cursor-not-allowed outline-none focus:outline-none text-stone-800 dark:text-white placeholder:text-stone-600/60 bg-transparent ring-transparent border border-stone-200 transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none select-none text-sm rounded-md py-2 px-2.5 ring shadow-sm hover:border-stone-500 hover:ring-secondary/10 focus:border-secondary focus:ring-secondary/10 peer" />
  </div>
  <div class="relative w-full">
    <input placeholder="Input Info" type="text" class="w-full aria-disabled:cursor-not-allowed outline-none focus:outline-none text-stone-800 dark:text-white placeholder:text-stone-600/60 bg-transparent ring-transparent border border-stone-200 transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none select-none text-sm rounded-md py-2 px-2.5 ring shadow-sm hover:border-info hover:ring-info/10 focus:border-info focus:ring-info/10 peer" />
  </div>
  <div class="relative w-full">
    <input placeholder="Input Success" type="text" class="w-full aria-disabled:cursor-not-allowed outline-none focus:outline-none text-stone-800 dark:text-white placeholder:text-stone-600/60 bg-transparent ring-transparent border border-stone-200 transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none select-none text-sm rounded-md py-2 px-2.5 ring shadow-sm hover:border-success hover:ring-success/10 focus:border-success focus:ring-success/10 peer" />
  </div>
  <div class="relative w-full">
    <input placeholder="Input Warning" type="text" class="w-full aria-disabled:cursor-not-allowed outline-none focus:outline-none text-stone-800 dark:text-white placeholder:text-stone-600/60 bg-transparent ring-transparent border border-stone-200 transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none select-none text-sm rounded-md py-2 px-2.5 ring shadow-sm hover:border-warning hover:ring-warning/10 focus:border-warning focus:ring-warning/10 peer" />
  </div>
  <div class="relative w-full">
    <input placeholder="Input Error" type="text" class="w-full aria-disabled:cursor-not-allowed outline-none focus:outline-none text-stone-800 dark:text-white placeholder:text-stone-600/60 bg-transparent ring-transparent border border-stone-200 transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none select-none text-sm rounded-md py-2 px-2.5 ring shadow-sm hover:border-error hover:ring-error/10 focus:border-error focus:ring-error/10 peer" />
  </div>
</div>
